<template>
  <div style="background-color: white">
    <!--搜索框-->
    <van-search v-model="searchVal" placeholder="请输入搜索关键词" show-action shape="round" style="position: fixed;top: 0;left: 0;width: 100%;height: 50px;z-index: 99" @search="onSearch">
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <van-row type="flex" style="position: relative;margin-top: 51px;margin-bottom: 56px;height: 100%;">
      <van-col span="6">
        <div style="float: left;overflow-y: auto;width: 100%;" :style="{height:scrollHeight}">
          <!--左侧商品类型-->
          <Sidebar :data="itemTypeList" @getItemListByCategoryAndType="getItemListByCategoryAndType"></Sidebar>
        </div>
      </van-col>
      <van-col span="18">
        <div style="float: left;overflow-y: auto;width: 100%;" :style="{height:scrollHeight}">
        <!--右侧商品列表-->
        <GoodsList :data="itemList" :gutterNum="0" :columnNum="2" :showDriver="true" driverTitle="该类型商品还未上架，敬请期待！"/>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar'
import GoodsList from '@/components/GoodsList'
export default {
  name: 'category',
  components: {
    Sidebar,
    GoodsList
  },
  data () {
    return {
      searchVal: '', // 搜索框关键字
      scrollHeight: window.innerHeight - 107 + 'px',
      itemCategory: '1', // 商品类别
      itemTypeList: [], // 商品类型
      itemList: []
    }
  },
  methods: {
    /**
     * 根据类型编码查询数据字典
     */
    getSysDictionaryListByTypeCode (typeCode) {
      const self = this
      const param = { typeCode: typeCode }
      self.axios.get('api/shop/getSysDictionaryListByTypeCode', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.itemTypeList = resp.data.data
          // 页面初始化加载第一个商品类型数据
          self.getItemListByCategoryAndType(resp.data.data[0].dicValue)
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onSearch () {
      this.$router.push({ name: 'searchResult', query: { itemCategory: this.itemCategory, searchVal: this.searchVal } })
    },
    /**
     * 根据商品类别和类型查询商品列表
     * itemCategory 1:设备 2：配件
     * itemType
     */
    getItemListByCategoryAndType (itemType) {
      const self = this
      const param = { itemCategory: self.itemCategory, itemType: itemType }
      self.axios.get('api/shop/getItemListByCategoryAndType', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.itemList = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    const self = this
    // 商品类别
    let itemCategory = self.$route.query.itemCategory
    if (itemCategory !== '2') {
      // 页面初始化加载设备类型
      self.getSysDictionaryListByTypeCode('sblx')
    } else {
      self.itemCategory = itemCategory
      // 页面初始化加载配件类型
      self.getSysDictionaryListByTypeCode('pjlx')
    }
  }
}
</script>

<style lang="less">
</style>
